<template>
  <el-dialog v-loading="loading" class="perm-dialog" title="角色权限" :visible.sync="visible" width="800px" @close="close">

    <el-form
      ref="form"
      v-loading="loading"
      style="max-height: 600px;overflow: auto"
      label-width="100px"
      label-position="left"
    >
      <el-form-item class="perm-title" label="操作对象">
        <span class="perm-title-value">权限</span>
      </el-form-item>
      <el-checkbox-group v-model="permList" :disabled="allPermission">
        <el-form-item v-for="group in groupList" :key="group.groupId" :label="group.groupName">
          <div class="check-group">
            <el-checkbox v-for="perm in group.permInfos" :key="perm.id" :label="perm.id">{{ perm.name }}</el-checkbox>
          </div>
        </el-form-item>
      </el-checkbox-group>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-checkbox v-model="allPermission" @change="handleChange">全部权限</el-checkbox>
      <span>
        <el-button @click="close">放弃</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">确定</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { getRolePerms, updateRolePerms } from '@/api/role'

export default {
  name: 'RolePermDialog',
  data() {
    return {
      resolve: null,
      reject: null,
      loading: false,
      visible: null,
      roleId: null,
      allPermission: null,
      permList: [],
      tempPermList: [],
      groupList: [],
      allPermList: []
    }
  },

  methods: {
    defaultForm() {
      return {
        code: null,
        name: null,
        type: 0,
        description: null
      }
    },
    fetchData() {
      this.loading = true
    },
    edit(roleId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.roleId = roleId
        getRolePerms(roleId).then(res => {
          if (res.code === 0) {
            this.permList = res.data.permList
            this.groupList = res.data.groupPermInfos ? res.data.groupPermInfos : []
            this.allPermission = res.data.allPermission

            let allPermList = []
            for (const group in this.groupList) {
              const permInfos = this.groupList[group].permInfos
              allPermList = allPermList.concat(permInfos.map(item => item.id))
            }

            this.allPermList = allPermList
            if (this.allPermission) {
              this.tempPermList = this.permList
              this.permList = allPermList
            }
          }
        })
      })
    },
    parseFeatures(featureStr) {
      if (!featureStr) {
        return []
      }
      const features = featureStr.split(',')
      return features.map(item => {
        return Number(item)
      })
    },
    close() {
      this.$refs.form.resetFields()
      this.visible = false
      this.resolve = null
      this.reject = null
    },
    handleChange() {
      if (this.allPermission) {
        this.tempPermList = this.permList
        this.permList = this.allPermList
      } else {
        this.permList = this.tempPermList
      }
    },
    handleSave() {
      const data = {
        id: this.roleId,
        allPermission: this.allPermission,
        permList: this.permList
      }

      this.loading = true
      updateRolePerms(data).then((resp) => {
        this.loading = false
        if (resp.code === 0) {
          this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
          this.resolve && this.resolve()
          this.close()
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .perm-dialog ::v-deep .el-dialog__header {
    border: none;
    padding-bottom: 0px !important;
  }

  .perm-dialog ::v-deep .el-dialog__body {
    padding: 2px 30px 6px 30px !important
  }

  .perm-dialog ::v-deep .el-dialog__footer {
    margin-top: 10px;
    .dialog-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

  }

  .perm-title {
    padding-bottom: 0 !important;
  }

  .perm-title-value {
    color: #999 !important;
  }

  .el-form-item {
    margin-bottom: 0;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #f1f1f1;
  }

  .el-form-item ::v-deep .el-form-item__label {
    color: #333 !important;
    font-weight: normal;
  }

  .perm-title ::v-deep .el-form-item__label {
    color: #999 !important;
  }

  .el-form-item ::v-deep .el-checkbox__label {
    color: #666;
  }
  .perm-dialog ::v-deep .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #333!important;
    cursor: not-allowed;
  }
  .perm-dialog ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #409eff;
  }
  .el-checkbox-group {
    .el-checkbox {
      margin-left: 0;
      margin-right: 30px;
    }
  }

  .check-group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
</style>
